<script setup>
import { ref, onMounted } from 'vue'
import SonCom from './components/SonCom.vue';
// 2. Vue3 组合式 API 中没有了 this，需要创建 ref 来获取dom节点
const h1Ref=ref(null)
// 组件挂载完毕后，获取 DOM 节点
onMounted(()=>{
  console.log(h1Ref.value);

})
const getDOM=()=>{
  console.log(h1Ref.value);

}
const message=ref('Hello Vue3')
const sonComRef=ref(null)
const getSonCom=()=>{
  // console.log(sonComRef.value);
  sonComRef.value.validate()


}
</script>
<template>
   <!-- 1. 给组件添加ref属性，用于获取dom节点 -->
<h1 ref="h1Ref">Hello Vue3</h1>
<BUtton @click="getDOM">点击获取</BUtton>
<SonCom :msg="message" ref="sonComRef"/>
<button @click="getSonCom">获取组件实例</button>
</template>


<style>
/* 样式 */
</style>
